<template>
  <div>
    <Divider>今天({{today}})</Divider>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in todayCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Divider>当月({{month}})</Divider>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in monthCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Divider>上月({{last_month}})</Divider>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in lastmonthCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Divider>今年({{year}})</Divider>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in yearCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { Statics } from '@/api/data'
import { getAuthkey } from '@/libs/util'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
  },
  data () {
    return {
      todayCardData: [],
      monthCardData: [],
      lastmonthCardData: [],
      yearCardData: [],
      today: '',
      month: '',
      last_month: '',
      year: ''
    }
  },
  created() {
      this.getStaticData()
  },
  mounted () {
    //
  },
  methods: {
      getStaticData(){
          let data = {
              auth_key: getAuthkey()
          }
          Statics(data).then(res => {
              this.today = res.data.data.today.time
              this.month = res.data.data.month.time
              this.last_month = res.data.data.last_month.time
              this.year = res.data.data.year.time
              this.todayCardData = [
                { title: '用户总数', icon: 'md-person-add', count: res.data.data.today.user_all?res.data.data.today.user_all: 0, color: '#2d8cf0' },
                { title: '有效用户总数', icon: 'md-locate', count: res.data.data.today.user_auth?res.data.data.today.user_auth: 0, color: '#19be6b' },
                { title: '消费总数', icon: 'md-help-circle', count: res.data.data.today.pay_num_all?res.data.data.today.pay_num_all: 0, color: '#ff9900' },
                { title: '消费总金额', icon: 'logo-yen', count: res.data.data.today.pay_money_all?res.data.data.today.pay_money_all: 0, color: '#ed3f14' },
                { title: '还款计划总数', icon: 'md-chatbubbles', count: res.data.data.today.plan_mun_all?res.data.data.today.plan_mun_all: 0, color: '#E46CBB' },
                { title: '还款总金额', icon: 'logo-yen', count: res.data.data.today.plan_money_all?res.data.data.today.plan_money_all: 0, color: '#9A66E4' },
                { title: '子任务总数', icon: 'md-folder', count: res.data.data.today.item_num_all?res.data.data.today.item_num_all: 0, color: '#2b85e4' }
              ]
              this.monthCardData = [
                { title: '用户总数', icon: 'md-person-add', count: res.data.data.month.user_all?res.data.data.month.user_all: 0, color: '#2d8cf0' },
                { title: '有效用户总数', icon: 'md-locate', count: res.data.data.month.user_auth?res.data.data.month.user_auth: 0, color: '#19be6b' },
                { title: '消费总数', icon: 'md-help-circle', count: res.data.data.month.pay_num_all?res.data.data.month.pay_num_all: 0, color: '#ff9900' },
                { title: '消费总金额', icon: 'logo-yen', count: res.data.data.month.pay_money_all?res.data.data.month.pay_money_all: 0, color: '#ed3f14' },
                { title: '还款计划总数', icon: 'md-chatbubbles', count: res.data.data.month.plan_mun_all?res.data.data.month.plan_mun_all: 0, color: '#E46CBB' },
                { title: '还款总金额', icon: 'logo-yen', count: res.data.data.month.plan_money_all?res.data.data.month.plan_money_all: 0, color: '#9A66E4' },
                { title: '子任务总数', icon: 'md-folder', count: res.data.data.month.item_num_all?res.data.data.month.item_num_all: 0, color: '#2b85e4' }
              ]
              this.lastmonthCardData = [
                { title: '用户总数', icon: 'md-person-add', count: res.data.data.last_month.user_all?res.data.data.last_month.user_all: 0, color: '#2d8cf0' },
                { title: '有效用户总数', icon: 'md-locate', count: res.data.data.last_month.user_auth?res.data.data.last_month.user_auth: 0, color: '#19be6b' },
                { title: '消费总数', icon: 'md-help-circle', count: res.data.data.last_month.pay_num_all?res.data.data.last_month.pay_num_all: 0, color: '#ff9900' },
                { title: '消费总金额', icon: 'logo-yen', count: res.data.data.last_month.pay_money_all?res.data.data.last_month.pay_money_all: 0, color: '#ed3f14' },
                { title: '还款计划总数', icon: 'md-chatbubbles', count: res.data.data.last_month.plan_mun_all?res.data.data.last_month.plan_mun_all: 0, color: '#E46CBB' },
                { title: '还款总金额', icon: 'logo-yen', count: res.data.data.last_month.plan_money_all?res.data.data.last_month.plan_money_all: 0, color: '#9A66E4' },
                { title: '子任务总数', icon: 'md-folder', count: res.data.data.last_month.item_num_all?res.data.data.last_month.item_num_all: 0, color: '#2b85e4' }
              ]
              this.yearCardData = [
                { title: '用户总数', icon: 'md-person-add', count: res.data.data.year.user_all?res.data.data.year.user_all: 0, color: '#2d8cf0' },
                { title: '有效用户总数', icon: 'md-locate', count: res.data.data.year.user_auth?res.data.data.year.user_auth: 0, color: '#19be6b' },
                { title: '消费总数', icon: 'md-help-circle', count: res.data.data.year.pay_num_all?res.data.data.year.pay_num_all: 0, color: '#ff9900' },
                { title: '消费总金额', icon: 'logo-yen', count: res.data.data.year.pay_money_all?res.data.data.year.pay_money_all: 0, color: '#ed3f14' },
                { title: '还款计划总数', icon: 'md-chatbubbles', count: res.data.data.year.plan_mun_all?res.data.data.year.plan_mun_all: 0, color: '#E46CBB' },
                { title: '还款总金额', icon: 'logo-yen', count: res.data.data.year.plan_money_all?res.data.data.year.plan_money_all: 0, color: '#9A66E4' },
                { title: '子任务总数', icon: 'md-folder', count: res.data.data.year.item_num_all?res.data.data.year.item_num_all: 0, color: '#2b85e4' }
              ]
          }, err => {
              this.$Message.error(err?err: '获取统计数据错误')
          })
      }
  }
}
</script>

<style lang="less">
.count-style{
  font-size: 50px;
}
</style>
